<template>
  <div class="editForm-wrapper">
    <!-- 发运计划固定设备编辑dialog-->
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      v-dialogDrag
      :visible.sync="editVisible"
    >
      <el-form
        label-width="127px"
        :rules="dataRule"
        ref="editForm"
        :model="editForm"

      >
        <el-form-item label="选择设备:" prop="equipId" :rules="[
                  {required: true, message:'请选择设备', trigger:'change'}
                 ]">
          <el-select clearable v-model="editForm.equipId" placeholder="---请选择---">
            <el-option
              v-for="item in equipData"
              :key="item.id"
              :label="item.outerCode"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择发运计划:" prop="planCode" :rules="[
                  {required: true, message:'请选择发运计划', trigger:'change'}
                 ]">
          <el-input class="selectInput" placeholder="请选择发运计划" v-model="editForm.planCode" @focus="getTransPlanClient">
<!--            <template slot="append"><span @click="getTransPlanClient">选择</span></template>-->
          </el-input>
        </el-form-item>
        <el-form-item label="往来名称:" prop="companyName">
          <el-input v-model="editForm.companyName" :disabled="true"></el-input>
<!--          {{editForm.companyName}}-->
        </el-form-item>
        <el-form-item label="货物:" prop="productName">
          <el-input v-model="editForm.productName" :disabled="true"></el-input>
<!--          {{editForm.productName}}-->
        </el-form-item>
        <el-form-item label="有效期从:" prop="startDate">
          <el-date-picker
            v-model="editForm.startDate"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="至:" prop="endDate">
          <el-date-picker
            v-model="editForm.endDate"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="doSubmit()" v-noMoreClick
          >确定</el-button
        >
        <el-button size="small" @click="close()">取消</el-button>
      </span>
    </el-dialog>
    <!--发运计划选择弹窗-->
    <TransPlanDialog ref="TransPlanDialog" @getTransPlanData="getTransPlanData">

    </TransPlanDialog>
  </div>
</template>
<script>
import { getEquipList, edit } from '@/api/transplan/fixEquip.js'
import TransPlanDialog from '@/components/dialog/transPlanDialog.vue'
export default {
  components: {
    TransPlanDialog
  },
  data () {
    return {
      method: '',
      title: '',
      editType: false,
      editForm: {
        equipId: '',
        transportPlanId: '',
        companyName: '',
        productName: '',
        startDate: '',
        endDate: '',
        planCode: '',
        id: ''
      },
      equipData: [],
      viewForm: {
        cardType: '',
        cardInnerNumber: '',
        cardNumber: '',
        state: 0,
        id: ''
      },
      editVisible: false,
      dialogVisible: false,
      dataRule: {
      }
    }
  },
  methods: {
  	handleClose(done) {
		this.$Msg.confirm({
			title:'您确定要关闭吗？',
			content:this.GLOBAL.FORM_CLOSE_TIPS,
			confirmCall:()=>{
				done();
			}
		})
	},
    init (method, editForm) {
      if (method === 'add') {
        this.editVisible = true
        this.$nextTick(() => {
          this.$refs['editForm'].resetFields()
        })
        this.editForm.id = ''
        this.title = '新增固定设备派车业务'
        this.editType = false
      } else if (method === 'edit') {
        this.editVisible = true
        this.method = method
        this.editType = true
        this.title = '修改固定设备派车业务'
        this.$nextTick(() => {
          this.$refs.editForm.clearValidate()
          this.editForm.equipId = editForm.equipId
          this.editForm.transportPlanId = editForm.plan.id
          this.editForm.planCode = editForm.plan.planCode //  发运计划编号
          this.editForm.companyName = editForm.business.companyName  // 往来名称
          this.editForm.productName = editForm.product.name // 货物名称
          this.editForm.startDate = editForm.startDate
          this.editForm.endDate = editForm.endDate
          this.editForm.id = editForm.id
        })
        // this.title = '固定设备派车业务'
      } else if (method === 'view') {
        this.method = method
        this.viewForm = editForm
        this.$nextTick(() => {
          this.$refs.editForm.resetFields()
          this.editForm = editForm
        })
        this.title = '固定设备派车业务'
      }
    },
    // 发运计划选择弹窗
    getTransPlanClient () {
      this.$refs['TransPlanDialog'].dialogVisible = true
    },
    // 发运计划选择数据回显
    getTransPlanData (row) {
      this.editForm.transportPlanId = row.id  // 发运计划ID
      this.editForm.planCode = row.planCode //  发运计划编号
      this.editForm.companyName = row.business.companyName  // 往来名称
      this.editForm.productName = row.product.name // 货物名称
      this.dialogVisible = false
    },
    getEquipData (orderName, orderByAORC) {
      getEquipList({
        orderBy: orderName,
        orderByAORC: orderByAORC,
        state: 2,
        types: 2
      }).then(({data}) => {
        if (data.code === '200') {
          this.equipData = data.result
        }
      })
    },
    close () {
      // this.editForm = {}
      this.editVisible = false
    },
    doSubmit () {
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          edit({
            transportPlanId: this.editForm.transportPlanId,
            equipId: this.editForm.equipId,
            startDate: this.editForm.startDate,
            endDate: this.editForm.endDate,
            state: 0,
            id: this.editForm.id
          }).then(({data}) => {
            if (data.code === '200') {
              this.$message({
                message: '保存成功',
                type: 'success'
              })
              this.editVisible = false
              this.$emit('refreshDataList')
            }
          })
        }
      })
    }
  },
  mounted () {
    this.getEquipData('', '')
  }
}
</script>
<style lang="scss" scoped>
.view-container {
  margin-bottom: 20px;
  display: flex;
  .label-container {
    width: 150px;
    text-align: right;
    font-size: 16px;
    font-weight: 400;
    color: #666666;
  }
  .form-container {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    width: 200px;
  }
}
</style>
